<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #toolbar_btns>
        <div class="w-[100%]">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="按周统计" name="week"></el-tab-pane>
            <el-tab-pane label="按月统计" name="month"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </VTable>
  </VPage>
</template>
<script setup lang="jsx">
import { shippingFulfillmentRateList } from "@/api/report"
const tableRef = ref()
const activeName = ref("week")
const handleClick = () => {
  tableRef?.value.query()
}
//获取下拉数据
onMounted(() => {})
// 列表配置
const tableOptins = reactive({
  formConfig: { data: {} },
  columns: [
    { field: "weekly_number", title: "统计周期", minWidth: 120 },
    { field: "planner_username", title: "计划人员", minWidth: 220 },

    { field: "sku_count", title: "发货SKU数量", minWidth: 120 },
    { field: "total_amount", title: "发货成本", minWidth: 120 },
    { field: "total_stocking_quantity", title: "备库单数量", minWidth: 120 },

    { field: "normal_count", title: "正常发货SKU数量", minWidth: 140 },
    { field: "normal_total_amount", title: "正常发货SKU总金额", minWidth: 150 },
    { field: "normal_stocking_quantity", title: "备库单数量", minWidth: 120 },

    { field: "timeout_count", title: "发货延迟SKU数量", minWidth: 140 },
    { field: "timeout_total_amount", title: "延迟SKU金额", minWidth: 120 },
    { field: "timeout_stocking_quantity", title: "延迟备库单数量", minWidth: 120 },

    { field: "timeliness_rate", title: "SKU发货及时率", minWidth: 140 },
    { field: "normal_amount_rate", title: "正常发货金额占比", minWidth: 140 },
    { field: "normal_quantity_rate", title: "正常发货备库单占比", minWidth: 150 },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = { page: page.pageNum, page_num: page.pageSize, statistical_dimensions: activeName.value }
        return shippingFulfillmentRateList(params)
      },
    },
  },
})
</script>
<style lang="scss" scoped></style>
